<template>
  <div class="singer">
    
    <div>data中初始化数据： {{msg}}</div>
    <p></p>
    <div>使用计算属性进行修改： {{changeMsg}}</div>
    <p></p>
    <button  @click.stop="greet">说你好stop</button><p></p><!-- 阻止单击事件冒泡 -->
    <button @click.prevent="greet">说你好prevent</button> <p></p><!-- 提交事件不再重载页面 -->
    <button @click.stop.prevent="greet">说你好stop&prevent</button> <p></p><!-- 阻止单击事件冒泡和提交事件不再重载页面 -->
    <button @click.capture="greet">说你好capture</button> <p></p> <!-- 添加事件侦听器时使用 capture 模式 -->
    <button @click.self="greet">说你好self</button> <p></p>   <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
            
    <div @keyup.13="greet">说你好greet</div>  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
  </div>  
</template>
<script>
import {getSingerList} from  '@/api/singer.js'
export default {
  data() {
    return {
      singer: [],
      msg: 'This is a new step'
    };
  },
  computed: {
    // computed是根据数据改变的时候再自动检测数据变化，然后在执行一次
    changeMsg() {
      console.log('computed赋值之前msg的值： ' + this.msg);

      this.msg='computed改变内容';

      console.log('computed赋值之后msg的值： ' + this.msg);
    }
  },
  methods: {

    greet() {
      console.log('通过click改变msg之前的值' + this.msg);
      this.msg = 'fuck you';
      console.log('通过click改变msg之后的值' + this.msg);
    }
  }

};
</script>
<style lang="scss" rel="stylesheet/scss">
  @import "@/assets/style/mixin.scss";
.singer {
  position: fixed;
  top: 88px;
  width: 100%;
  bottom: 0;
  font-size: 12px;
}
</style>